<template>
  <div>
    <el-row :gutter="20">
      <!-- <el-col :span="8">
        <Card title="我的" style="margin-bottom: 20px">
          <div class="my">
            <div class="my-item">
              <div class="icon"><svg-icon iconClass="fullscreen" /></div>
              <div class="label">
                <span> 排查任务完成率： </span>
                <span style="color: dodgerblue">
                  {{ myPcData["排查任务完成率"] }}
                </span>
              </div>
            </div>
            <div class="my-item">
              <div class="icon"><svg-icon iconClass="fullscreen" /></div>
              <div class="label">
                <span> 已排查： </span>
                <span style="color: red">
                  {{ myPcData["已排查"] }}
                </span>
              </div>
            </div>
            <div class="my-item">
              <div class="icon"><svg-icon iconClass="fullscreen" /></div>
              <div class="label">
                <span> 待排查： </span>
                <span style="color: red">
                  {{ myPcData["待排查"] }}
                </span>
              </div>
            </div>
            <div class="my-item">
              <div class="icon"><svg-icon iconClass="fullscreen" /></div>
              <div class="label">
                <span> 已超时： </span>
                <span style="color: red">
                  {{ myPcData["已超时"] }}
                </span>
              </div>
            </div>
            <div class="my-item">
              <div class="icon"><svg-icon iconClass="fullscreen" /></div>
              <div class="label">
                <span> 待整改隐患： </span>
                <span style="color: red">
                  {{ myPcData["待整改隐患"] }}
                </span>
              </div>
            </div>
          </div>
        </Card>
      </el-col> -->

      <el-col :span="8">
        <Card title="机制运行情况" style="margin-bottom: 20px">
          <template #subTitle>
            <div style="height: 45px">
              <el-date-picker
                v-model="tjDate"
                type="daterange"
                range-separator="To"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                value-format="YYYY-MM-DD"
                @change="initUnit"
                style="line-height: 45px !important"
              />
              <el-button @click="resetDate" style="line-height: 45px"
                >重置</el-button
              >
            </div>
          </template>
          <Table
            ref="yhtable"
            title=""
            :headers="['部门名称', '运行情况']"
            :propsData="['name', 'yxCondition']"
          ></Table>
          <div class="jz">
            <div class="item" style="background: green">
              <div>优</div>
              <div>{{ jzMap["优"] || 0 }}</div>
            </div>
            <div class="item" style="background: blue">
              <div>良</div>
              <div>{{ jzMap["良"] || 0 }}</div>
            </div>
            <div class="item" style="background: orange">
              <div>中</div>
              <div>{{ jzMap["中"] || 0 }}</div>
            </div>
            <div class="item" style="background: red">
              <div>差</div>
              <div>{{ jzMap["差"] || 0 }}</div>
            </div>
          </div>
        </Card>
      </el-col>
      <el-col :span="8">
        <Card title="上周任务排查情况" style="margin-bottom: 20px">
          <Bar2Vue ref="prevTask"></Bar2Vue>
        </Card>
      </el-col>

      <!-- <el-col :span="8">
        <Card title="隐患整改提醒" style="margin-bottom: 20px">
          <div class="my">
            <template v-if="zgData.length">
              <div class="my-item" v-for="item in zgData">
                <div class="label">
                  <span> {{ item.name }} </span>
                  <span style="color: dodgerblue">
                    {{ item.count }}
                  </span>
                </div>
              </div>
            </template>
            <div class="my-item" v-else>
              <div class="label">暂无整改提醒</div>
            </div>
          </div>
        </Card>
      </el-col> -->
      <el-col :span="8">
        <Card title="隐患整改情况" style="margin-bottom: 20px">
          <BarVue ref="hiddenzgqk"></BarVue>
        </Card>
      </el-col>
      <!-- <el-col :span="8">
        <Card title="上周隐患整改" style="margin-bottom: 20px">
    
          <Bar2Vue ref="prevHidden"></Bar2Vue>
        </Card>
      </el-col> -->
    </el-row>
  </div>
</template>

<script setup>
import Card from "./components/Card.vue";
import BarVue from "./components/Bar.vue";
import Bar2Vue from "./components/Bar3.vue";
import Table from "./components/onlyTable.vue";
import {
  getPrevWeekHidden,
  getMyPcqk,
  getHiddenWaring,
  HiddenCondition,
  countPrewWeek,
  queryBarData,
  countHiddenDayWeekMonth,
  toCountUnit,
} from "@/api/yhpc/tkfx.js";
import { getUserProfile } from "@/api/system/user";
import SvgIcon from "@/components/SvgIcon";
const queryParams = ref({});
const tasks = ref();
const thzg = ref();
const myPcData = ref({});
const prevTask = ref();
const userInfo = ref({});
const prevHidden = ref();
const hiddenzgqk = ref();
const zgData = ref([]);
const jzMap = ref({});
const yhtable = ref();
onMounted(async () => {
  userInfo.value = JSON.parse(localStorage.getItem("USER_INFO"));
  if (!userInfo.value) {
    const res = getUserProfile();
    userInfo.value = res.data;
  }
  queryParams.value.userName = userInfo.value.userName;
  getPrevWeekHidden(queryParams.value).then((res) => {
    prevHidden.value.setData({
      data: res.data.map((item) => item.count),
      yAxis: res.data.map((item) => item.name),
      title: "",
    });
  });
  getMyPcqk(queryParams.value).then((res) => {
    myPcData.value = res.data;
  });
  getHiddenWaring(queryParams.value).then((res) => {
    zgData.value = res.data;
  });
  HiddenCondition(queryParams.value).then((res) => {
    hiddenzgqk.value.setData(
      res.data.map((item) => ({
        value: item.count,
        name: item.name,
      }))
    );
  });
  countPrewWeek(queryParams.value).then((res) => {
    prevTask.value.setData({
      data: res.data.map((item) => item.count),
      yAxis: res.data.map((item) => item.name),
      title: "",
    });
  });
  // queryBarData(queryParams.value).then((res) => {
  //   const { hidden, task } = res.data;
  //   tasks.value.setData(
  //     task.map((item) => ({
  //       value: item.count,
  //       name: item.task_state,
  //     }))
  //   );

  // });
  initUnit();
});

const formatDate = (time) => {
  if (time) {
    const date = new Date(time);
    const year = date.getFullYear();
    const month = date.getMonth() + 1;
    const day = date.getDate();

    return `${year}-${padZero(month)}-${padZero(day)}`;
  } else {
    return null;
  }
};

//补零函数
function padZero(n) {
  return n < 10 ? "0" + n : n;
}
const dateNow = Date.now();

const tempType = ref(0);
const tjDate = ref([
  formatDate(dateNow - 3600 * 24 * 1000 * 7),
  formatDate(dateNow),
]);
const initUnit = () => {
  toCountUnit({ startTime: tjDate.value[0], endTime: tjDate.value[0] }).then(
    (res) => {
      yhtable.value.setData(res.data.list || []);
      jzMap.value = res.data.map || {};
    }
  );
};

const resetDate = () => {
  tjDate.value = [];
  initUnit();
};
</script>

<style lang="scss" scoped>
.index {
  // padding: 20px;
  width: 100%;
  // min-height: calc(100vh);
  background-color: #e6ecf1;
}
.mt20 {
  margin-top: 20px;
}

.my {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  &-item {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    font-weight: 600;
    .label {
      padding: 10px;
      width: 220px;
      text-align: center;
      background-color: #eee;
      border-radius: 15px;
    }
    .icon {
      padding: 10px;
      background-color: #eee;
      border-radius: 50%;
      margin-right: 24px;
    }
  }
}
.jz {
  display: flex;
  justify-content: space-around;
  .item {
    height: 50px;
    width: 80px;
    color: #fff;
    border-radius: 12px;
    text-align: center;
    padding-top: 3px;
  }
}
</style>
